<template>
  <view class="valueCardGiveto">
    <view class="bind-num">请选择需要转赠的卡（{{ cardList.length }}张）</view>
    <view class="bind-box">
      <block v-for="(item, index) in cardList" :key="index">
        <view class="bind" :style="{'background-color': currentId == item.id ? 'black' : ''}" @tap="clickCard(index)">
          <view :style="{'opacity': currentId == item.id ? '0.5' : '1'}">
            <view class="top" />
            <view class="bottom" />
            <text class="money">￥{{ item.balance }}</text>
            <text class="no">{{ item.cardno }}</text>
            <text class="validity">有效期：永久有效</text>
            <text class="txt">可充值</text>
            <image class="image" src="http://127.0.0.1:8888/static/images/images/stored_card/card_bind.png" mode="aspectFill" />
          </view>
          <image class="checked" :hidden="currentId == item.id ? 'false' : 'true'" src="http://127.0.0.1:8888/static/images/images/stored_card/checked.png" mode="aspectFill" />
        </view>
      </block>
    </view>

    <view class="foot">
      <view class="left-wrapper flex">
        <view class="count-txt">已选择：</view>
        <view class="count-num">￥{{ payinfo.money }}</view>
        <view class="count-txt">（共{{ payinfo.num }}张）</view>
      </view>
      <view class="flex" @tap="comfirmgiveto">
        <view class="pay-btn">立即转赠</view>
      </view>
    </view>
  </view>
</template>
<script>
import { cardUserList } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      cardList: [],
      currentId: 0,
      payinfo: {
        money: 0.00,
        num: 0
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  onLoad() {
  },
  onReachBottom() {
  },

  methods: {
    init() {
      cardUserList({
        status: 'Y',
        receiverCardNo: this.userInfo.cardNo
      }).then(res => {
        uni.hideLoading()
        const cardList = res.data
        console.log('查询会员储值卡列表：', cardList)

        this.cardList = cardList
      })
    },
    clickCard(e) {
      this.currentId = e
    },
    comfirmgiveto() {
      if (this.data.currentId === 0) {
        uni.$u.toast('请选择一张储值卡')
        return
      }
      let card = {}
      for (const item of this.data.cardList) {
        if (item.id === this.data.currentId) {
          card = item
          break
        }
      }
      uni.$u.route('/pages/valueCards/givetoConfirm/index', {
        card: card
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.valueCardGiveto {
  min-height: 100%;
  flex: 1;
  font-size: 32rpx;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  overflow: hidden;
}
.flex {
  display: flex;
}
.container .bind-num {
  line-height: 100rpx;
  padding-left: 48rpx;
  font-size: 33rpx;
  letter-spacing: 2rpx;
}

.bind-box .bind {
  position: relative;
  z-index: 2;
  margin: 0 20rpx 40rpx 20rpx;
  height: 260rpx;
  width: 95%;
  border-radius: 12rpx;
}

.bind .top {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 150rpx;
  background: #f9be52;
  border-top-left-radius: 12rpx;
  border-top-right-radius: 12rpx;
}

.bind .bottom {
  position: absolute;
  z-index: 0;
  top: 140rpx;
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  border-bottom-left-radius: 12rpx;
  border-bottom-right-radius: 12rpx;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
}

.bind .money {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 6%;
  font-family: PingFang, PingFang-SC;
  color: #ffffff;
  font-size: 42rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.bind .no {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 6%;
  font-family: PingFang, PingFang-SC;
  color: #ffffff;
  font-size: 31rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
}

.bind .validity {
  position: absolute;
  z-index: 2;
  top: 69%;
  left: 3%;
  font-family: PingFang, PingFang-SC;
  font-size: 30rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.bind .txt {
  position: absolute;
  z-index: 2;
  top: 69%;
  right: 3%;
  font-size: 30rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.bind .image {
  position: absolute;
  z-index: 2;
  width: 68rpx;
  height: 56rpx;
  top: 11%;
  right: 6%;
}

.bind .checked {
  position: absolute;
  z-index: 2;
  width: 96rpx;
  height: 96rpx;
  top: 32%;
  left: 48%;
}

/* 表单底 */
.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 140rpx;
  background: #ffffff;
  box-shadow: 0 -4rpx 26rpx 0 rgba(0, 0, 0, 0.11);
}
.foot .left-wrapper {
  flex: 1;
  align-items: center;
}
.foot .pay-btn {
  font-size: 40rpx;
  width: 275rpx;
  font-family: Courier, Calibri, '黑体';
  background-color: #ff3d3d;
  text-align: center;
  line-height: 140rpx;
  color: #fff;
}
.count-txt {
  margin-left: 20rpx;
  font-size: 34rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: 500;
  color: #000000;
  letter-spacing: 2rpx;
}
.count-num {
  font-size: 46rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: 600;
  color: #e27844;
  letter-spacing: 1px;
}
</style>
